<!--
 * @Author: actor
 * @Date: 2023-12-04 11:52:03
 * @email: 395593455@qq.com
 * @LastEditors: actor
 * @LastEditTime: 2023-12-19 10:15:01
 * @FilePath: \i-hos-app\shared\emr\src\components\common\kbsList.vue
 * @Description: 知识库列表
-->
<template>
  <div class="kbsList">
    <el-tree v-if="treeData.length" :data="treeData" :props="defaultProps" accordion>
      <template #default="{ node, data }">
        <div :class="['el-tree-item', node.isCurrent && !node.childNodes.length ? 'active' : '']" @click="handleNodeClick(data)">
          <!--不管多少级， 有子集文件夹图标 -->
          <el-icon size="15" v-if="node.childNodes.length"><FolderOpened /></el-icon>
          <!--不管多少级， 只要没有有子集文件图标 -->
          <el-icon size="15" v-else><Document /></el-icon>
          {{ node.label }}
        </div>
      </template>
    </el-tree>
    <el-empty v-else description="暂无数据" :image-size="150" />
    <div class="detail" v-if="Object.keys(detailData).length > 0">
      <div><label>类型：</label>{{ detailData?.detailList.length > 0 ? 'list' : 'text' }}</div>
      <div><label>标识：</label>无</div>
      <div><label>描述：</label>{{ detailData.emrKnowledgeBaseMainName }}</div>
      <div><label>编码：</label>{{ detailData.emrKnowledgeBaseMainCode }}</div>
      <div v-if="detailData?.detailList.length > 0">
        <label>值域：</label>
        <div class="textVal">
          <span v-for="(item, index) in detailData.detailList" :key="item.emrKnowledgeBaseDetailName">
            {{ index + 1 }}: {{ item.emrKnowledgeBaseDetailName }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, getCurrentInstance } from 'vue'
  import { ISetType, ISetConfigType } from '../../interface/set'

  let { proxy } = getCurrentInstance() as any,
    treeData: any = ref([]),
    detailData: any = ref({}),
    defaultProps = {
      children: 'childList',
      label: 'emrKnowledgeBaseCategoryName',
    }

  // 定义向父组件传值的事件
  const $emit = defineEmits<{
    (e: 'setKbs', type: string, flag: ISetType | ISetConfigType, val?: any): void
  }>()
  // 操作知识库向编辑器插入对应元素
  const setKbsConfig = (type: string, flag: ISetType, val?: any): void => {
    $emit('setKbs', type, flag, val)
  }

  // 初始化获取知识库
  const fetchCategory = () => {
    const url: String = APP_GLOBAL.API['EMR']['category-query-main']
    proxy.$http.requestJSON('post', url, '').then((res: any) => {
      if (res.data) treeData.value = res.data
    })
  }
  fetchCategory()

  // 选中知识库行
  const handleNodeClick = (data: any) => {
    if (!data.childList) {
      const url: String = APP_GLOBAL.API['EMR']['category-table-details']
      proxy.$http.requestJSON('post', url, data.emrKnowledgeBaseCategoryId).then((res: any) => {
        if (res.data) {
          detailData.value = res.data
          console.log(res.data)
          let _list: boolean = !!res.data.detailList && res.data.detailList.length > 0
          let _val: any = {
            des: res.data.emrKnowledgeBaseMainName,
            code: res.data.emrKnowledgeBaseMainCode,
            option: [],
          }
          if (_list) {
            for (let obj of res.data.detailList) {
              _val.option.push(obj.emrKnowledgeBaseDetailName)
            }
          }
          console.log(4444, _val)
          setKbsConfig(
            'insertDown',
            {
              _n: _list ? '下拉框' : '文本框',
              _tp: _list ? 'dropDownBox' : 'textbox',
            },
            _val
          )
        }
      })
    }
  }
</script>

<style scoped lang="scss">
  .el-tree-item {
    display: flex;
    align-items: center;
    width: 100%;
    .el-icon {
      margin-right: 5px;
    }
    &.active {
      color: #79bbff;
    }
  }
  :deep(.el-tree-node__content) {
    font-size: var(--theme-font-size);
    height: 20px;
  }
  .detail {
    padding: 5px 0px;
    font-size: var(--theme-font-size);
    color: #606266;
    border-top: 1px solid #a2d0ff;
    margin: 20px 10px;
    line-height: 1.8em;
    > div {
      display: flex;
      align-items: flex-start;
      label {
        width: 40px;
        text-align: right;
      }
      .textVal {
        display: flex;
        flex-direction: column;
        flex: 1;
        background: white;
        border-radius: 2px;
        padding: 5px;
      }
    }
  }
</style>
